


<template>

  <div class="main-friend">

    <div class="box-friendList">
      <el-table :data="tableData" style="width: 100%">
        <!--      <el-table-column label="头像">
                <avatar-component :size="35" ></avatar-component>
              </el-table-column>-->
        <el-table-column  label="接收人账号" prop="receiveAdmin" />
        <el-table-column label="接收人昵称" prop="receiveName" />
        <el-table-column label="申请人账号" prop="requestAdmin" />
        <el-table-column label="申请人昵称" prop="requestName" />
<!--        <el-table-column label="好友昵称" prop="friendName" />-->
        <el-table-column align="right">

          <template #header>
            <el-input v-model="search" size="small" placeholder="Type to search" />
          </template>
          <template #default="scope">
            <el-button size="small"
                       @click=pass(scope.$index)
            >同意</el-button


            >

            <el-button
                type="danger"
                size="small"
                @click.prevent="refuse(scope.$index)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>

</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  data() {
    return {
      tableData: [],
      admin_array: [],
      username:"",
      name:""

    }
  },
  created() {
    const _this = this//将全局变量赋值到局部
    console.log(this.$route.query.username)
    _this.username=this.$route.query.username
/*
    axios({
      method: 'post',
      url: 'http://localhost:8081/showUserByAdmin',
      params: {
        userName: _this.username
      }
    })
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error);
        });
*/

    axios({
      method: 'post',
      url: 'http://localhost:8081/showRequest',
      params: {
        receiveAdmin: _this.username
      }
    })
        .then(function (response) {
          console.log(response.data)
          _this.tableData = response.data
        })
        .catch(function (error) {
          console.log(error);
        });
  },

  methods:{
  pass(index){

    // console.log(this.tableData.at(index).requestAdmin)
    axios({
      method: 'post',
      url: 'http://localhost:8081/beFriend',
      params: {
        recAdmin:this.tableData.at(index).receiveAdmin,
        recName:this.tableData.at(index).receiveName,
        reqAdmin:this.tableData.at(index).requestAdmin,
        reqName:this.tableData.at(index).requestName
      }
    })
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error);
        });

   ElMessage({
               message:"你们成为互相的好友了，赶紧打个招呼吧",
               type:'success'
             })


    //删除这一行
    this.tableData.splice(index,1)
  },
    refuse(index){
      //删除这一行
      axios({
        method: 'post',
        url: 'http://localhost:8081/refuseBeFriend',
        params: {
          recAdmin:this.tableData.at(index).receiveAdmin,
          reqAdmin:this.tableData.at(index).requestAdmin,
        }
      })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (error) {
            console.log(error);
          });
      this.tableData.splice(index,1)

    }
  }
}
</script>
<style>
.box-avatar{
  position: absolute;
  /*position: absolute;*/
  /*border: solid 1px;*/
  width: 50px;
  margin-top: 40px;
}
.box-friendList{
  position: relative;
  /*border: solid 1px;*/
  width: 1000px;
  margin-left: 50px;
}
</style>
